<template>
    <Popovers :width="width">
        <template #reference>
            <span class="iconfont icon-caozuo ml10 pointer"></span>
        </template>
        <div class="operate_list">
            <ul class="operate_list_ul">
                <li v-for="(action, index) in actions" :key="index" @click="handleAction(action)">
                    <span :class="['iconfont', action.icon]"></span>
                    <span class="text">{{ action.label }}</span>
                </li>
            </ul>
        </div>
    </Popovers>
</template>

<script setup lang="ts">
import Popovers from '@/components/common/Popovers.vue';

defineProps({
    width: {
        type: Number,
        default: 220, // 默认宽度
    },
    actions: {
        type: Array as () => Array<{ label: string; icon: string; callback: Function }>,
        required: true,
    },
});

const handleAction = (action: { label: string; icon: string; callback: Function }) => {
    if (action.callback) {
        action.callback();
    }
};
</script>

<style scoped lang="scss">
.operate_list {
    .operate_list_ul {
        li {
            padding: 6px 10px;
            display: flex;
            align-items: center;

            .iconfont {
                padding-right: 6px;
                color: #4c5f79;
            }
        }

        li:hover {
            cursor: pointer;
            border-radius: 6px;
            background: #ececec;
        }
    }
}
</style>